<template>
  <div class="outsides">
    <!-- 查看页  数据 渲染  input 不带边框，其实只用 span标签渲染就好了 -->
     <div class="message">
     <div><h1>供应商名称:{{formData.supplierName }}  <span> &emsp; </span> 编号：{{formData.supplierNo}}</h1></div>
        <div>
          <el-form
            :inline="true"
            ref="form"
            type="text"
            :model="form"
            :rules="rules"
            size="medium"
            label-width="150px"
            style="margin: 20px 80px 0 10px"
          >
            <el-form-item label="创建人:">
              <!-- <span> {{拿到数据渲染}} </span> -->
              <span>{{formData.createBy}}</span>
             
            </el-form-item>

            <el-form-item label="创建时间:">
              <span>{{formData.createTime}}</span>
             
            </el-form-item>
            <el-form-item label="最后修改人:">
              <span> {{formData.updateBy}}</span>
             
            </el-form-item>
            <el-form-item label="修改时间:">
              <span>{{formData.updateTime}}</span>
            </el-form-item>
          </el-form>
        </div>

      
      </div> 
    <div class="header">
      <h1>基础信息</h1>
    </div>
    <div class="outside">
      <div class="left">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="供应商名称" prop="supplierName">
           <span>{{formData.supplierName}}</span>
          </el-form-item>

          <el-form-item label="法人" prop="legalPerson">
            <span>{{formData.legalPerson}}</span>
          </el-form-item>
          <div class="block" style="margin-bottom: 20px; margin-left: 50px">
            <span class="demonstration">地址：</span>
            <span>{{formData.province}}/</span>
            <span>{{formData.city}}/</span>
            <span>{{formData.county}}</span>
           
          </div>

          <el-form-item label="详细地址" prop="field107">
            <span>{{formData.address}}</span>
          </el-form-item>
          <el-form-item label="联系人" prop="field107">
            <span>{{formData.contacts}}</span>
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="130px"
        >
          <el-form-item label="供应商类型" prop="supplierType">
            <span>{{formData.supplierType}}</span>
          </el-form-item>

          <el-form-item label="合作关系等级" prop="partnershipLevel">
            <span>{{formData.partnershipLevel}}</span>
          </el-form-item>

          <el-form-item label="社会信用代码" prop="socialCreditCode">
           <span>{{formData.socialCreditCode}}</span>
          </el-form-item>
          <el-form-item label="联系电话" prop="field107">
             <span>{{formData.phone}}</span>
          </el-form-item>
        </el-form>
      </div>
     
    </div>
     <div class="footer">
        <el-form>
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">关闭</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>
<script>
import {
  listSupplier,
  getSupplier,
  delSupplier,
  addSupplier,
  updateSupplier,
} from "@/api/supplier/supplier";
export default {
  components: {},
  props: [],
  data() {
    return {
     

      formData: {
       
      },
      rules: {
        field107: [
          {
            required: true,
            message: "请输入单行文本",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
 console.log("query", this.$route.query.id);

    getSupplier(this.$route.query.id).then((response) => {
      this.formData = response.data;
      console.log( "res", response.data)

          this.formData.city = response.data.city.split(",")[1];
          this.formData.county = response.data.county.split(",")[1];
          this.formData.province = response.data.province.split(",")[1];
        
      console.log("form",this.formData);
    });

  },
  mounted() {},
  methods: {
    submitForm() {
      // this.$refs["elForm"].validate((valid) => {
      //   if (!valid) return;
      //   // TODO 提交表单
      // });
      this.$router.push({ path: "/supplier/supplier" });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style lang="scss" scoped>
.outsides {
  margin-left: 17px;
}
.header {
  margin-top: 30px;
  margin-left: 30px;
}

.outside {
  width: 100%;
  display: flex;
  margin-top: 50px;
}
.left {
  width: 44%;
  margin-left: 100px;
  line-height: 100px;
}
.right {
  width: 44%;
}
.footer{
    margin-top: 30px;
    text-align: center;
}
.message {
    margin-top: 10px;
  padding-left: 20px;
  width: 50%vh;
  height: 140px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
</style>
